<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>大转盘抽奖活动-惠而浦万名主妇微调查</title>
<%@include file="/WEB-INF/jsp/common/style.jsp" %>
<link rel="stylesheet" type="text/css" href="${request.contextPath}/style/css.css"/>
<script language="javascript" type="text/javascript" src="${request.contextPath}/js/jquery.easing.min.js"></script>
<script language="javascript" type="text/javascript" src="${request.contextPath}/js/jQueryRotate.2.2.js"></script>
<script type="text/javascript">
<!--
$(function(){
	var timeOut = function(){  //超时函数
		$("#lotteryBtn").rotate({
			angle:0, 
			duration: 10000, 
			animateTo: 2160, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的
			callback:function(){
				alert('网络超时');
			}
		}); 
	}; 
	var rotateFunc = function(prizelevel,angle,text){  //awards:奖项，angle:奖项对应的角度
		$('#lotteryBtn').stopRotate();
		$("#lotteryBtn").rotate({
			angle:0, 
			duration: 5000, 
			animateTo: angle+1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
			callback:function(){
				prizedInfo(prizelevel,text);
			}
		}); 
	};
	
	$("#lotteryBtn").rotate({ 
	   bind: 
		 { 
			click: function(){
				var url="${request.contextPath}/vote/startLottery.action";
				$.getJSON(url,function(obj){			
					var returnCode=obj["returncode"];
					var prizelevel=obj["prizelevel"];
					var prizetype=obj["prizetype"];
					var remark=obj["remark"];
					//alert("returnCode:"+returnCode+" prizelevel:" + prizelevel + " prizetype:"+prizetype);
					
					//未答卷,没有抽奖资格
					if(returnCode=="9999"){
						alert("未答卷,没有抽奖资格!");
						return;
					//已经中过奖，不能再中
					}else if(returnCode=="9998"){
						alert("已抽过奖，没有抽奖资格!");
						return;
					}else if(returnCode=="0000"){						
						if(prizelevel=="8"){
							rotateFunc(8,157,remark);
						}					
						if(prizelevel=="7"){
							rotateFunc(7,22,remark);
						}
						if(prizelevel=="6"){
							rotateFunc(6,247,remark);
						}
						if(prizelevel=="5"){
							rotateFunc(5,112,remark);
						}
						if(prizelevel=="4"){
							rotateFunc(4,337,remark);
						}	
						if(prizelevel=="3"){
							rotateFunc(3,67,remark);
						}
						if(prizelevel=="2"){
							rotateFunc(2,202,remark);
						}
						if(prizelevel=="1"){
							rotateFunc(1,292,remark);							
						}
					}										
				});
			}
		 }	   
	});
	
	function startClick(){
		var url="${request.contextPath}/vote/startLottery.action";
		$.getJSON(url,function(obj){			
			alert(obj);
		});	
	}	
	<c:if test="${message!=null && message!=''}">
	alert(message);
	</c:if>
});

function prizedInfo(prizelevel,text){
	//未中奖
	if(prizelevel==1){
		$("#noprizeDiv").show();
		$("#fade").show();
	}else{
		$("#prizeContent").html(text);
		$("#prizedDiv").show();
		$("#fade").show();
	}
}

//关闭中奖窗口
function closePrizedWin(){
	$("#prizedDiv").hide();
	$("#fade").hide();
}
//关闭参与窗口
function closeNoPrizeWin(){
	$("#noprizeDiv").hide();
	$("#fade").hide();
}
//保存信息
function saveUserInfo(){
	var userName=$("#userName").val();
	var mobile=$("#mobile").val();
	var email=$("#email").val();	
	$("#personInfoId").html("");
	
	var address=document.getElementById("address").value;	
	if(userName=="" || mobile=="" || email=="" || address==""){
		$("#personInfoId").html("个人资料不能为空！");
		return;
	}	
	if(!checkEmail(email)){
		$("#personInfoId").html("邮箱格式不正确！");
		return;
	}
	if(address=""){
		$("#personInfoId").html("地址不能为空！");
		return ;
	}	
	if(address.length>50){
		$("#personInfoId").html("地址最长50个字符！");
		return ;
	}	
	$("#lotteryForm").attr("target","_self");  
	document.lotteryForm.action="${request.contextPath}/vote/recordUserInfo.action";
	document.lotteryForm.submit();
}
//-->
</script>
</head>
<body>
<div class="wamp">
	<div class="top"> 
<link type="text/css" href="http://www.whirlpool.com.cn/css/core.css" rel="stylesheet" /><link type="text/css" href="http://www.whirlpool.com.cn/css/home.css" rel="stylesheet" />
<!--[if IE 6]>
  <script src="/js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
  <script type="text/javascript">
  DD_belatedPNG.fix('.png');
  </script>
  <![endif]-->
 
   <style type="text/css">
   body{ background:#9f529a url(/images/bg.jpg) center top no-repeat; margin:0px; padding:0px;	}
       .mask-index{width:100%; height:100%; position:fixed; top:0; left:0; background:url(http://www.whirlpool.com.cn/images/mask-i.png) repeat; z-index:19999;}
        .newproducts{width:1002px; height:408px; position:absolute; top:140px; left:50%; margin-left:-501px; z-index:29999; display:block;}
        .newproducts img{width:100%; height:100%;}
.banner .bannerSwitch {
	width: 100%;
	height: 406px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.banner .bannerSwitch img {
	
	
}
.banner .bannerSwitch li {
	position: absolute;
	left: 0;
	top: 0;width:100%; height:406px; overflow:hidden;
	z-index: 10;
	display: none;
	background-color: #fff;
}
.banner .bannerSwitch dl {
	position: absolute;width:555px; height:9px; background:#9F539D;
	bottom: 0px; padding:3px 0px 0px 445px; text-indent:-99999px;
	z-index: 11;
}
.banner .bannerSwitch dd {
	background: url("http://www.whirlpool.com.cn/images/index/i2.gif") repeat 0 0;
	width: 7px;
	height: 7px;
	line-height: 22px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	overflow: hidden;
	float: left;
	margin-right: 15px;
	cursor: pointer;
	color: #fff;
}
.banner .bannerSwitch dd.current {
	background: url("http://www.whirlpool.com.cn/images/index/i1.gif") repeat 0 0;
}
.banner .bannerSwitch span {
	/*display: block;
	position: absolute;
	z-index: 12;
	top: 20px;
	height: 50px;
	width: 50px;
	border: 1px solid #fff;
	cursor: pointer;*/
}
.banner .bannerSwitch span.prev {
	left: 20px;
}
.banner .bannerSwitch span.next {
	right: 20px;
}
.kv {
	z-index: 1;
	width: 100%;
	height: 406px;
	overflow: hidden;
	position: relative;
}
.kv ul {
	height: 406px;
	overflow: hidden;
	position: relative;
}
.kv .img-loaded {
	display: none;
	height: 406px;
	overflow: hidden;
	position: relative;
}
.kv .txt {
	position:absolute; top:0px; width:1000px; overflow:hidden;
	height: 406px;
}
.kv .txt-inner {
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(http://www.whirlpool.com.cn/images/common/bg2.png) repeat 0 0;
	border: 2px solid #8c5c92;
	padding: 10px;
	display: none;
	width: 976px;
	line-height: 20px;
}
.kv .txt-inner .fl {
	width: 600px;
	padding-bottom: 6px;
}
.kv .txt-inner .fr {
	width: 349px;
	padding-left: 25px;
}
.kv .txt-inner .fr img {
	margin: 0 10px;
}
.kv .num {
	position: relative;
	height: 12px;
	margin-top: -12px;
}
.kv .num-inner {
	background: #9f539d;
	height: 12px;
	overflow: hidden;
	position: absolute;
	left: 0;
	text-align: center;
}
.kv .num em {
	display: inline-block;
*display: inline;
	zoom: 1;
	height: 7px;
	line-height: 7px;
	width: 7px;
	background: url(http://www.whirlpool.com.cn/images/index/i2.gif) repeat 0 0;
	margin: 0 8px;
	vertical-align: top;
	overflow: hidden;
	margin-top: 2px;
	cursor: pointer;
}
.kv .num em.on {
	background: url(http://www.whirlpool.com.cn/images/index/i1.gif) repeat 0 0;
}
</style>
    <script type="text/javascript">
    <!--
        $(function() {
            $(".banner").bannerSwitch({
                time: 5000,
                animation: 1500
            });

            var dlPos = ($(window).width() - 1000) / 2;
            $(".banner .bannerSwitch li").css("width",$(window).width());
            $(".banner .bannerSwitch dl,.kv .txt").css("left", dlPos);

        });
    //-->
    </script>

</head>
<body>
 
 

<script type="text/javascript">
ACTrackerz = {
mid: 500198, //网站id
ers: [{type:"pageview"}],
track: function (er) {
this.ers.push(er);
}};
(function (){
		var js = document.createElement("script"), scri = document.getElementsByTagName("script")[0];
		js.type = "text/javascript";
		js.async = true;
		scri.parentNode.insertBefore(js, scri);
		js.src = location.protocol == "https:" ? "https://secure.acs86.com/nact.js" : "http://static.acs86.com/nact.js";
})();
</script>
<div class="top clearfix" style="position:absolute; z-index:10">
    <div class="top-con w tr" style="margin-left:-15px">
        <a href="http://www.whirlpool.com.cn/about/">关于惠而浦</a> | <a href="http://www.whirlpool.com.cn/news/">新闻中心</a> | <a href="http://www.whirlpool.com.cn/hr/" target="_blank">人才招聘</a> |    <a class="last" href="http://www.whirlpool.com.cn/user/login.aspx">登录/注册</a> 
    </div>
    <div class="inner png">
        <div class="w wrap" style=" margin-left:-20px;" >
            <div class="logo fl">
                <a href="http://www.whirlpool.com.cn/" title="惠而浦"><img src="http://www.whirlpool.com.cn/images/common/logo.png" alt="惠而浦" class="png" /></a>
            </div>

            <div class="menu fl">
                <ul>
                    <li class="png item li1 li1"><a href="http://www.whirlpool.com.cn/product/" class="a0 png">产品中心</a>
                         
                        
                    </li>
                    <li class="spc"></li>
                    <li class="png item li2 li2"><a href="http://www.whirlpool.com.cn/experience/" class="a0 png hasDrop">产品体验</a>
                    </li>
                    <li class="spc"></li>
                    <li class="png item li3 li3"><a href="http://www.whirlpool.com.cn/service/" class="a0 png hasDrop">售后服务</a>
                         
                    </li>
                    <li class="spc"></li>
                    <li class="png item li4 li4"><a href="http://www.whirlpool.com.cn/office/" class="a0 png">经销商专区</a> 
                    </li>
                    <li class="spc"></li>
                    <li class="png item li5 li5"><a href="http://www.whirlpool.com.cn/project/" class="a0 png">项目渠道</a>
                         
                    </li>
                     

                </ul>
            </div>

            <div class="search fr" >
                <form id="formhd" method="get" action="http://www.whirlpool.com.cn/product/list.aspx?" onSubmit="return hdSearch();">
                    <input placeholder="输入搜索关键字" name="keywords" id="keywords" class="txt1" /><input type="button" class="txt2" onClick="hdSearch()" />
                </form>
            </div>

            
        </div>
    </div>
</div>
<script type="text/javascript">
    function hdSearch() {
        if ($("#keywords").val() == "") {
            alert("关键词不能为空");return false;
        }
        location.href="http://www.whirlpool.com.cn/product/list.aspx?keywords=" + $("#keywords").val();
    }
</script>
</div>
<div class="adq" style="background:url(${request.contextPath}/images/s2.jpg) no-repeat top"> 038958730</div>
<style>
.adq{ text-align:right; float:left; width:965px; font-family:Microsoft YaHei; font-size:18px; color:#000000; padding-right:35px; font-weight:bold; height:189px;}

</style>

<div class="ad1"> 
			<div class="ad1-left">
				<div class="ly-plate">
					<div class="rotate-bg"></div>
					<div class="lottery-star"><img src="${request.contextPath}/images/rotate-static.png" id="lotteryBtn"></div>
				</div>
			</div>
			 
		</div>
		
	<div class="guize">
<div class="left-guize">
<style>
.jiangpin{ float:left; width:265px; line-height:45px; padding-left:10px;}
.left-jiangpin{ float:left; width:180px; font-size:12px; font-weight:bold;}
.right-jiangpin{ float:left; width:70px; padding-left:5px;color:#CC0000; font-weight:bold; font-size:16px}
.jiangpin1{ float:left; width:265px; line-height:45px;padding-left:10px; background:#f5e0c4;}
.left-jiangpin1{ float:left; width:180px;font-size:12px;  font-weight:bold;}
.right-jiangpin1{ float:left; width:70px; padding-left:5px;color:#CC0000; font-weight:bold; font-size:16px;}

</style>
<div class="jiangpin">

<div class="left-jiangpin">冰箱BCD-600E2GB</div>
<div class="right-jiangpin">9500元</div>

</div>
<div class="jiangpin1">

<div class="left-jiangpin1">洗衣机XQG100-ZS24109BC</div>
<div class="right-jiangpin1">6399元</div>

</div>
<div class="jiangpin">

<div class="left-jiangpin">微波炉MAX109/BRZ</div>
<div class="right-jiangpin">3290元</div>

</div>
<div class="jiangpin1">

<div class="left-jiangpin1">净化器WA-4001FK</div>
<div class="right-jiangpin1">3499元</div>

</div>
<div class="jiangpin">

<div class="left-jiangpin">搅拌机WBL-MP301J</div>
<div class="right-jiangpin">298元</div>

</div>
<div class="jiangpin1">

<div class="left-jiangpin1">惠而浦纪念版水晶笔</div>
<div class="right-jiangpin1">200元</div>

</div>

<div class="jiangpin">

<div class="left-jiangpin">50元移动充值卡</div>
<div class="right-jiangpin">50元</div>

</div>
</div>
<div class="right-guize">
 <div class="right23">活动日期：2014/3/17--2014/7/1</div>
    
<table width="570" border="0" cellspacing="16" cellpadding="0">
 
  <tr>
    <td align="left" valign="top"> <img src="${request.contextPath}/images/huodlc.png"></td>
    <td align="left" valign="top">参与“万名主妇惠而浦家电消费微调查”活动，提交调查问卷，即有一次抽奖机会。</td>
  </tr>
  <tr>
    <td align="left" valign="top"> <img src="${request.contextPath}/images/huojgz.png"></td>
    <td align="left" valign="top">我们客服将于3-5个工作日内与您取得联系，请中奖者如实填写您的个人资料，以便进行身份确认和奖品寄送。
因中奖者个人原因未提供真实信息导致奖品无法寄送将视为自动放弃奖品领取权。 </td>
  </tr>
  <tr>
    <td align="left" valign="top"> <img src="${request.contextPath}/images/jiangpin.png"></td>
    <td align="left" valign="top"> 每人均有一次抽奖机会，多次参与抽奖所获奖品视为无效。
获奖者均需提供个人相关资料，以便我们进行奖品确认和寄送。未提交个人信息者视为自动放弃奖品领取权。</td>
  </tr>
</table>



<div class="quan">* 本次活动最终解释权归为惠而浦（中国）投资有限公司所有</div>


</div>


</div>			
	</div>
	
	
	
 
	
	<div class="foot" style="font-size:12px; text-align:center; line-height:40px;">©2014 Whirlpool .All Right Reserved 沪ICP备13004331号 惠而浦（中国）投资有限公司</div>
	
	
	
	
	
	
	
	
	
	<%-- 中奖  --%>
	<div id="prizedDiv" class="white_content" style="display:none;">
		
	<div class="tishi">
			<div class="tishititle"><img src="${request.contextPath}/images/close.png" onclick="closePrizedWin();"/></div>
			<div class="contishi">		
				<div class="zhongjiang1">
					<div class="left-zhongjiang1"><img src="${request.contextPath}/images/gongxi.png" /></div>
					<div class="right-zhongjiang1">
						<div class="topzhong">恭喜您获得：<span id="prizeContent"></span></div>
						<div class="topzi">请如实填写您的个人资料，以便我们客服进行身份确认和奖品寄送。</div>
					</div>
				</div>
				<div class="line"></div>		
				<div class="from">
					<form id="lotteryForm" name="lotteryForm" method="post">
						<div class="xm"><span>姓名：</span><input id="userName" name="userName" maxlength="10" type="text" value="" /></div>
						<div class="xm"><span>电话：</span> <input id="mobile" name="mobile" maxlength="50" type="text" value="" /></div>
						<div class="xm"><span>邮箱：</span> <input id="email" name="email" maxlength="50" type="text" value=""/></div>
						<div class="xm"><span>地址：</span><textarea id="address" name="address" cols="20" rows="15"></textarea>
						</div>
						<p>
							<div style="float:left; margin-left:50px;"><img src="${request.contextPath}/images/tijiao.jpg" style="cursor:pointer" onclick="saveUserInfo();"/></div>
							<div id="personInfoId" style="float:left; padding-left:15px; line-height:25px; font-size:12px; color:#FF0000";></div>
						</p>
					</form>
				</div>
			</div>
		</div>
	
	</div>
	<%-- 谢谢参与  --%>
	<div id="noprizeDiv" class="white_content" style="display:none;">	
		<div class="tishi">
			<div class="tishititle"><img src="${request.contextPath}/images/close.png" onclick="closeNoPrizeWin();"/></div>
			<div class="contishi">	
				<div class="zhongjiang">	
					<div class="left-zhongjiang"><img src="${request.contextPath}/images/gongxi.png" /></div>
					<div class="right-zhongjiang"><h4 style="font-size:16px; margin-top:20px; font-weight:bold; font-weight:bold">差一点就中奖了，感谢您的参与!</h4></div>
				</div>
				<div class="line"></div>
				<div class="input"><img src="${request.contextPath}/images/wu.png" /></div>
			</div>
		</div>		
	</div>	
	<div id="fade" class="black_overlay" style="display:none;"></div>		
</body>
</html>